'use strict';
import React, { Component } from 'react';

import {
	View,
	Image,
	ImageBackground,
	Dimensions,
	TouchableWithoutFeedback,
	StyleSheet,
	Text,
	TouchableOpacity,
	TextInput,
	ScrollView,
	TouchableHighlight,
	TouchableNativeFeedback,
	Switch,
	Modal,
	Alert
} from 'react-native';

import ToastUtil from '../../../../core/utils/toast-util.js';
import { Loading, EasyLoading } from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import Hr from 'react-native-hr'
import Color from '../../../../core/constant/color.js';
import Constant from '../../../../core/constant/constant';
import CameraButton from '../../../../core/component/comp.button-camera.js';
import Toolbar from '../../../../core/component/comp.toolbar';
import InitDB from '../../../../core/database/init-db.js';
import ModalDropdown from '../../../../core/component/comp.modal-dropdown.js';
import { NavigationActions } from 'react-navigation'
import Http from '../../../../core/utils/http.js';

let winWidth = Dimensions.get('window').width;//屏幕宽度
let winHeight = Dimensions.get('window').height;//屏幕高度

let headImgEmpty = require('../../../../img/headImg_empty.png');

const BORDER_COLOR_NORMAL = '#DDD';
const BORDER_COLOR_RED = '#ff0000';
const BUTTON_BGCOLOR_ENABLE = '#FFC000';
const BUTTON_BGCOLOR_DISABLE = '#FFC000';
const BUTTON_COLOR_ENABLE = '#FFFFFF';
const BUTTON_COLOR_DISABLE = '#FFC000';

let instance;

class AccountSafeScene extends React.Component {
	// 构造
	constructor(props) {
		super(props);

		this.state = {
			username: '',
			xiayibuEnable: false,
			username_new: null,
			bgYanzhengma: null,
			sendYanzhengmaDate: null,
		}

		instance = this;
	}

	componentDidMount() {
		let username = InitDB.getUserInfo('QST_CODE="username"')[0].OPT_VAL;
		this.setState({
			username: username
		})
	}

	goToChangeMobile() {
		instance.props.navigation.navigate('');
	}

	sendMessageConfirm() {
		if (this.state.xiayibuEnable) {
			Alert.alert(
				'确认手机号码',
				'我们将发送验证码短信到这个号码:+86' + this.state.username_new,
				[
					{ text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
					{ text: '好', onPress: () => this.sendMessage() },
				],
				{ cancelable: false }
			)
		}
	}

	sendMessage() {
		if (this.state.username === this.state.username_new) {
			Alert.alert("提示", "手机号与当前手机号相同，无需更改");
			return;
		}

		let params = {
			mobile: this.state.username_new,
			uniqueUserId: ''
		};

		Promise.resolve().then(EasyLoading.show('正在加载..', 3000))
		Http.post_upload('sendVerification', null, params)
			.then(res => {
				Promise.resolve().then(EasyLoading.dismis());
				if (res.returnType.resultCode === '1') {
					ToastUtil.show("验证码发送成功");
					console.info('yanzhengma:' + res.returnType.other.yanzhengma);
					instance.props.navigation.navigate("UpdateMobile2", {
						username_new: this.state.username_new,
						yanzhengma: res.returnType.other.yanzhengma,
					})
					//this.setState({bgYanzhengma:res.returnType.other.yanzhengma,sendYanzhengmaDate:new Date()});
				} else {
					ToastUtil.show('验证码发送失败' + res.returnType.resultMessage);
				}
			}).catch(err => {
				//请求失败
				ToastUtil.show('发送失败，错误信息:' + err);
				Promise.resolve().then(EasyLoading.dismis());
			})
	}
	render() {
		return (
			<View>
				<View style={styles.box}>
					<TouchableOpacity
						onPress={() => { instance.props.navigation.goBack() }}
						style={{ height: 50, width: 50, flexDirection: "row", justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', left: 0, top: 0 }}>
						<Text style={{ color: '#ffffff' }}>取消</Text>
					</TouchableOpacity>
					<View style={{ flexDirection: "row", justifyContent: "center" }}>
						<Text style={[styles.text, this.props.textColor ? { color: this.props.textColor } : {}]} >更换手机号</Text>
					</View>
					<TouchableOpacity style={{
						position: 'absolute', right: 0, top: 0, height: 50, width: 50,
						flexDirection: "row", justifyContent: "center",

					}}
						onPress={this.sendMessageConfirm.bind(this)}
					>
						<Text style={{ color: this.state.xiayibuEnable ? '#64ae55' : '#49574c', alignSelf: 'center' }}>下一步</Text>
					</TouchableOpacity>
				</View>
				<ScrollView style={styles.body}>
					<Loading />
					<View style={{
						marginLeft: 15, marginRight: 15, marginTop: 10, marginBottom: 10, flexDirection: "row",
						justifyContent: "center"
					}}>
						<Text style={{ color: Color.TEXT_GREY, fontSize: 15 }}>更换手机后，下次登陆可使用新手机号登</Text>
					</View>
					<View style={{
						marginLeft: 15, marginRight: 15, marginTop: 5, marginBottom: 10, flexDirection: "row",
						justifyContent: "center"
					}}>
						<Text style={{ color: Color.TEXT_GREY, fontSize: 15 }}>陆。当前手机号:</Text>
					</View>

					<View style={{
						marginLeft: 15, marginRight: 15, marginTop: 5, marginBottom: 10, flexDirection: "row",
						justifyContent: "center"
					}}>
						<Text style={{ color: Color.TEXT_GREY, fontSize: 15 }}>{this.state.username}</Text>
					</View>

					<View style={{
						marginLeft: 15, marginRight: 15, marginTop: 15, marginBottom: 10, flexDirection: "row",
						justifyContent: "center", backgroundColor: "#ffffff", borderBottomWidth: 1, borderColor: "#eaeaea", padding: 8
					}}>
						<View style={{ flex: 1 }}><Text>+86</Text></View>
						<TextInput style={{ flex: 3, borderLeftWidth: 1, borderColor: "#eaeaea" }} placeholder='请填写手机号码'
							keyboardType="numeric"
							onChangeText={(text) => {
								let xiayibuEnable;
								if (text) {
									xiayibuEnable = true;
								} else {
									xiayibuEnable = false;

								}
								this.setState({ username_new: text, xiayibuEnable: xiayibuEnable });
							}} />
					</View>
				</ScrollView>
			</View>
		)
		//}
	}

}


class VideoSpzt extends React.Component {
	render() {
		let spzt = this.props.spzt;
		if (spzt && spzt != '1') {

			let spztDesc;
			if (spzt === '0') {
				spztDesc = '视频认证审批中';
			} else if (spzt === '2') {
				spztDesc = '视频认证未通过';
			}
			return (
				<View style={[this.props.styles, { backgroundColor: '#393130' }]}>
					<Text>{spztDesc}</Text>
				</View>
			);
		} else {
			return null;
		}
	}

}


const PageColor = {
	textLabel: 'rgb(143,143,143)',
	borderColor: 'rgb(230,230,230)',
}


const styles = StyleSheet.create({
	body: {
		backgroundColor: Color.VIEW_BG_COLOR,
		height: winHeight,
		flexDirection: "column",
	},
	box: {
		height: 50,
		justifyContent: 'center',
		alignItems: 'center',
		borderBottomWidth: 0.5,
		borderColor: '#DDDDDD',
		backgroundColor: '#38373d',
		flexDirection: 'row',
		marginTop: 0,
		width: winWidth,
		//	flex:1,
	},
	back: {
		height: 20,
		width: 20,

	},
	text: {
		alignSelf: "center",
		color: '#ffffff'
		//marginLeft:winWidth/2-20,
	}
});

module.exports = AccountSafeScene;
export default AccountSafeScene;